<template>
  <!-- 新建问答弹窗 -->
  <ElDialog class="user-dialog" :title="dialogTitle" v-model="dialogVisible" :before-close="handleClose" style="width: 1000px;">
    <ElForm :model="saveAnswerForm" label-width="80px" label-position="top">
      <ElFormItem label="问题" prop="question"><ElInput v-model="saveAnswerForm.question"></ElInput></ElFormItem>
      <ElFormItem label="回复内容" prop="answer"><ElInput v-model="saveAnswerForm.answer"></ElInput></ElFormItem>
      <ElFormItem label="使用状态">
        <ElRadio v-model="saveAnswerForm.status" label="使用中" :value="0"></ElRadio>
        <ElRadio v-model="saveAnswerForm.status" label="未使用" :value="1"></ElRadio>
      </ElFormItem>
      <ElFormItem label="备注" prop="remark"><ElInput v-model="saveAnswerForm.remark"></ElInput></ElFormItem>
    </ElForm>
    <template #footer>
      <ElButton @click="handleClose">取消</ElButton>
      <ElButton type="primary" @click="handleSubmit">保存</ElButton>
    </template>
  </ElDialog>
  <!-- 问答查询条件 -->
  <ElCard style="height: 75px;display: flex;align-items: flex-start;">
    <ElForm :inline="true" :model="searchAnswerForm" label-width="80px">
      <ElFormItem label="问题">
        <ElInput v-model="searchAnswerForm.question" placeholder="请输入" style="width: 220px;"></ElInput>
      </ElFormItem>
      <ElFormItem label="使用状态">
        <ElSelect v-model="searchAnswerForm.status" placeholder="请选择" style="width: 290px;">
          <ElOption label="使用中" value="0"></ElOption>
          <ElOption label="未使用" value="1"></ElOption>
        </ElSelect>
      </ElFormItem>
      <ElForm-item label="记录时间" prop="createTime">
        <ElDatePicker
            v-model="searchAnswerForm.times"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </ElForm-item>
      <ElFormItem>
        <ElButton @click="handleReset">重置</ElButton>
        <ElButton color="blue" :icon="Search.name" type="primary" @click="loadAnswer">搜索</ElButton>
        <ElButton color="blue" @click="beforeAddAnswer">新增</ElButton>
      </ElFormItem>
    </ElForm>
    <div class="pagination-container">
      <el-pagination
          background
          layout="prev, pager, next,sizes,total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 30]"
          :current-page="currentPage"
          :total="total"
          style="position: absolute;bottom: 15px;right: 50px;" />
    </div>
  </ElCard>
  <!-- 问答表格 -->
  <ElCard style="height: 66vh;margin-top: 10px;overflow: auto;">
    <ElTable :data="currentPageData" style="width:100%;" :cell-style="cellStyle"
             :header-cell-style="{'text-align': 'center','background-color': '#F2F2F2',height: '60px',fontWeight: 'bold',color:'black'}">
      <ElTableColumn type="index" label="序号" width="60" />
      <ElTableColumn label="问题" prop="question" align="center" />
      <ElTableColumn label="回复内容" prop="answer" align="center" />
      <ElTableColumn
          label="使用状态"
          prop="status"
          :formatter="(row, column, cellValue, index) => { return row.status === 0 ? '使用中' : '未使用'; }"
          align="center"
      />
      <ElTableColumn label="记录人" prop="createBy" align="center" />
      <ElTableColumn label="记录时间" prop="createTime" align="center" />
      <ElTableColumn label="更新时间" prop="updateTime" align="center" />
      <ElTableColumn label="操作" align="center">
        <template #default="scope">
          <ElButton link type="primary" @click="handleEdit(scope.$index)">编辑</ElButton>
          <ElButton link type="danger" @click="handleDelete(scope.row.id)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
  </ElCard>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Search} from "@element-plus/icons-vue";
import qs from "qs";
import axios from "axios";

onMounted(() => {
  loadAnswer();
})

const pageSize = ref(10);
const currentPage = ref(1);

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return AnswerArr.value.slice(start, end);
});

const total = computed(() => AnswerArr.value.length);

const handleCurrentChange = (page) => {
  currentPage.value = page;
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
};

const searchAnswerForm = ref({
  question: '',
  status: '',
});

const times = ref([]);

const AnswerArr = ref([]);

const dialogVisible = ref(false);

const dialogTitle = ref("");

const saveAnswerForm = ref({
  question: '',
  answer: '',
  status: '',
  remark: ''
})

const beforeAddAnswer = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新增回复';
  saveAnswerForm.value = {};
  times.value = [];
}

const handleClose = () => {
  ElMessageBox.confirm('确认关闭？').then(() => {
    dialogVisible.value = false;
    saveAnswerForm.value = {};
    loadAnswer();
  }).catch(() => {});
}

//新增
const handleSubmit = () => {
  let data = qs.stringify(saveAnswerForm.value)
  axios.post(getBaseURL(4) + '/v1/faq/save', data)
      .then(res => {
        if (res.data.code === 2000) {
          ElMessage.success('保存成功');
          dialogVisible.value = false;
          loadAnswer();
        }else{
          ElMessage.error(res.data.msg);
        }
      }).catch(err => {
    ElMessage.error(err.message)
  })
}

//编辑
const handleEdit = (index) => {
  dialogVisible.value = true;
  dialogTitle.value = '编辑回复';
  saveAnswerForm.value = AnswerArr.value[index];
}

//删除
const handleDelete = (id) => {
  ElMessageBox.confirm('确认删除？').then(() => {
    axios.get(getBaseURL(4) + '/v1/faq/delete?id='+id)
       .then(res => {
          if (res.data.code === 2000) {
            ElMessage.success('删除成功');
            loadAnswer();
          }else{
            ElMessage.error(res.data.msg);
          }
        }).catch(err => {
      ElMessage.error(err.message)
    })
  }).catch(() => {});
}

//重置查询条件
const handleReset = () => {
  searchAnswerForm.value = {}
  times.value = [];
  loadAnswer();
}


//加载用户列表
const loadAnswer = () => {
  axios.get(getBaseURL(4) + '/v1/faq/select?'+qs.stringify(searchAnswerForm.value))
   .then(res => {
      if (res.data.code === 2000) {
        AnswerArr.value = res.data.data;
      }else{
        ElMessage.error(res.data.msg);
      }
   }).catch(err => {
     ElMessage.error(err.message)
  })
}

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property === 'status') {
    return { color: row.status === 0 ? '#0368FF' : '#808080' };
  }
  return {};
};


</script>

<style>
.user-dialog {
  width: 1000px;
  padding: 40px;
}

.class-border >  {
  text-align: center;
}

.pagination-container{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-card.is-always-shadow {
  box-shadow: none;
}
</style>
